import React, { useState, useEffect } from 'react';
import MagicBento from './MagicBento';
import { useThemeStore } from '../../stores/themeStore';
import { getTheme } from '../../theme/config';
import './MagicBentoDemo.css';

const MagicBentoDemo: React.FC = () => {
  const { mode } = useThemeStore();
  const theme = getTheme(mode);
  const [config, setConfig] = useState({
    textAutoHide: true,
    enableStars: true,
    enableSpotlight: true,
    enableBorderGlow: true,
    disableAnimations: false,
    spotlightRadius: 300,
    particleCount: 12,
    enableTilt: false,
    glowColor: '132, 0, 255',
    clickEffect: true,
    enableMagnetism: true
  });

  // 设置CSS变量以支持主题切换
  useEffect(() => {
    // 只在浏览器环境中执行
    if (typeof document === 'undefined') return;
    
    const root = document.documentElement;
    if (mode === 'dark') {
      root.style.setProperty('--header-gradient-start', '#61dca3');
      root.style.setProperty('--header-gradient-end', '#1890ff');
      root.style.setProperty('--text-primary', theme.textPrimary);
      root.style.setProperty('--text-secondary', theme.textSecondary);
      root.style.setProperty('--controls-bg', '#1a1a1a');
      root.style.setProperty('--card-border', theme.cardBorder);
      root.style.setProperty('--input-border', '#444');
      root.style.setProperty('--input-bg', '#2d2d2d');
      root.style.setProperty('--component-bg', '#000');
      root.style.setProperty('--glow-color', theme.glowColor);
    } else {
      root.style.setProperty('--header-gradient-start', '#6a11cb');
      root.style.setProperty('--header-gradient-end', '#2575fc');
      root.style.setProperty('--text-primary', '#333');
      root.style.setProperty('--text-secondary', '#666');
      root.style.setProperty('--controls-bg', '#f8f9fa');
      root.style.setProperty('--card-border', 'transparent');
      root.style.setProperty('--input-border', '#ddd');
      root.style.setProperty('--input-bg', '#fff');
      root.style.setProperty('--component-bg', '#0a0a0a');
      root.style.setProperty('--glow-color', '#6a11cb');
    }
  }, [mode]); // 只依赖mode，避免theme对象变化导致的重复执行

  const handleConfigChange = (key: string, value: any) => {
    setConfig(prev => ({ ...prev, [key]: value }));
  };

  return (
    <div className="magic-bento-demo" style={{ background: theme.contentBackground, minHeight: '100vh' }}>
      <div className="demo-header">
        <h1>Magic Bento Grid Demo</h1>
        <p style={{ color: theme.textSecondary }}>A beautiful animated grid component with interactive effects</p>
      </div>

      <div className="demo-controls">
        <h2 style={{ color: theme.textPrimary }}>Configuration</h2>
        <div className="control-group">
          <label style={{ color: theme.textPrimary }}>
            <input
              type="checkbox"
              checked={config.textAutoHide}
              onChange={(e) => handleConfigChange('textAutoHide', e.target.checked)}
            />
            Text Auto Hide
          </label>
          
          <label style={{ color: theme.textPrimary }}>
            <input
              type="checkbox"
              checked={config.enableStars}
              onChange={(e) => handleConfigChange('enableStars', e.target.checked)}
            />
            Enable Stars
          </label>
          
          <label style={{ color: theme.textPrimary }}>
            <input
              type="checkbox"
              checked={config.enableSpotlight}
              onChange={(e) => handleConfigChange('enableSpotlight', e.target.checked)}
            />
            Enable Spotlight
          </label>
          
          <label style={{ color: theme.textPrimary }}>
            <input
              type="checkbox"
              checked={config.enableBorderGlow}
              onChange={(e) => handleConfigChange('enableBorderGlow', e.target.checked)}
            />
            Enable Border Glow
          </label>
          
          <label style={{ color: theme.textPrimary }}>
            <input
              type="checkbox"
              checked={config.disableAnimations}
              onChange={(e) => handleConfigChange('disableAnimations', e.target.checked)}
            />
            Disable Animations
          </label>
          
          <label style={{ color: theme.textPrimary }}>
            <input
              type="checkbox"
              checked={config.enableTilt}
              onChange={(e) => handleConfigChange('enableTilt', e.target.checked)}
            />
            Enable Tilt
          </label>
          
          <label style={{ color: theme.textPrimary }}>
            <input
              type="checkbox"
              checked={config.clickEffect}
              onChange={(e) => handleConfigChange('clickEffect', e.target.checked)}
            />
            Click Effect
          </label>
          
          <label style={{ color: theme.textPrimary }}>
            <input
              type="checkbox"
              checked={config.enableMagnetism}
              onChange={(e) => handleConfigChange('enableMagnetism', e.target.checked)}
            />
            Enable Magnetism
          </label>
        </div>
        
        <div className="control-group">
          <label style={{ color: theme.textPrimary }}>
            Spotlight Radius: 
            <input
              type="range"
              min="100"
              max="600"
              value={config.spotlightRadius}
              onChange={(e) => handleConfigChange('spotlightRadius', parseInt(e.target.value))}
            />
            {config.spotlightRadius}px
          </label>
          
          <label style={{ color: theme.textPrimary }}>
            Particle Count: 
            <input
              type="range"
              min="0"
              max="30"
              value={config.particleCount}
              onChange={(e) => handleConfigChange('particleCount', parseInt(e.target.value))}
            />
            {config.particleCount}
          </label>
          
          <label style={{ color: theme.textPrimary }}>
            Glow Color (R,G,B): 
            <input
              type="text"
              value={config.glowColor}
              onChange={(e) => handleConfigChange('glowColor', e.target.value)}
              style={{ 
                background: mode === 'dark' ? '#2d2d2d' : '#fff',
                color: theme.textPrimary,
                border: `1px solid ${mode === 'dark' ? '#444' : '#ddd'}`
              }}
            />
          </label>
        </div>
      </div>

      <div className="demo-component">
        <MagicBento {...config} />
      </div>
    </div>
  );
};

export default MagicBentoDemo;